<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <section class="bg"></section>

    <div class="loading-text">0%</div>

    <script>
        const bg = document.querySelector('.bg')
        const loadText = document.querySelector('.loading-text')

        // 设置全局变量
        let load  = 0
        let int = setInterval(bluring,30)

        function bluring(){
            load++

            if(load > 99){
                clearInterval(int)
            }

            loadText.innerHTML = `${load}%`
            loadText.style.opacity = scale(load,0,100,1,0)
            bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`
        }

        //             load  最小加载值  最大加载值  透明度从大到小
        const scale = (num,in_min,in_max,out_min,out_max) =>{
            return ((num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min)
        }
    </script>
</body>
</html>